import React from 'react';

import { Footer } from '@/widgets/Footer';
import cn from 'classnames';
import dynamic from 'next/dynamic';
import Image from 'next/image';

import StarGreen from '../../images/parallax-star-green.svg';
import Star from '../../images/parallax-star.svg';
import Vector from '../../images/parallax-vector.svg';
import cs from './FooterParallax.module.scss';

const ParallaxContainer = dynamic(() => import('../Parallax'));

export const FooterParallax = () => (
  <Footer>
    <ParallaxContainer classNames={cs.parallaxContainer}>
      <Image
        alt="star"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={4}
        height={224}
        src={Star}
        width={224}
      />
      <Image
        alt="vector"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={4}
        height={815}
        src={Vector}
        width={781}
      />
      <Image
        alt="star"
        className={cn(cs.parallaxItem, 'parallax-item')}
        data-speed={4}
        height={220}
        src={StarGreen}
        width={220}
      />
    </ParallaxContainer>
  </Footer>
);
